<template>
  <page-layout title="签约主体管理">
    <div class="contract-management">
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="9">
          <a-form layout="inline">
            <a-form-item label="关键字">
              <a-input v-model="searchTemplateState.name" placeholder="请输入主体名称/法人姓名" allow-clear>
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="onSearch">
                <a-icon type="search" />查询
              </a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="3" :offset="12" style="text-align: right">
          <a-button type="primary" @click="onNewTemplate">
            <a-icon type="plus" />新建签约主体
          </a-button>
        </a-col>
      </a-row>
      <a-table class="contract-table" rowKey="id" :columns="columns" :scroll="dataSource.length > 0 ? { x: 1500 } : undefined" :data-source="dataSource" :loading="loading" :pagination="{
        current: searchTemplateState.page,
        pageSize: searchTemplateState.size,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
    }">
        >
        <!-- <template slot="status" slot-scope="text, record">
          <a-badge v-if="record.status == '1'" color="green" text="启用" />
          <a-badge v-else color="red" text="禁用" />
        </template> -->
        <template slot="name" slot-scope="text">
          <a :title='text' style="color: rgba(0, 0, 0, 0.65)">{{ text ? text : '-' }}</a>
        </template>
        <template slot="legalPerson" slot-scope="text">{{ text ? text : '-' }}</template>
        <template slot="taxpayerNumber" slot-scope="text">{{ text ? text : '-' }}</template>
        <template slot="createBy" slot-scope="text">{{ text ? text : '-' }}</template>
        <template slot="createTime" slot-scope="text">
          <span>{{ text | dateFilter }}</span>
        </template>
        <template slot="updateTime" slot-scope="text">
          <span>{{ text | dateFilter }}</span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-space :size="size">
            <a class="ant-dropdown-link" @click="onDetail(record)">详情</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link" @click="onEdit(record)">编辑</a>
            <!-- <a-divider type="vertical" />
            <a-popconfirm title="确定要删除该合同模板吗?" ok-text="确定" cancel-text="取消" @confirm="onConfirmDelete(record.id)">
              <a class="ant-dropdown-link">删除</a>
            </a-popconfirm> -->
          </a-space>
        </template>
      </a-table>
      <!-- 新建模板弹窗 -->
      <a-modal :title="modalTitle + '签约主体'" v-model="isNewTemplate" :width="500" @ok="handleOk" @cancel="handleCancel(0)" :confirm-loading="confirmLoading">
        <a-form-model ref="addTemplate" :model="templateForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-form-model-item class="require" label="主体名称" prop="subjectName">
            <a-input-search v-model="templateForm.subjectName" placeholder="请输入主体名称" @search="iptOnSearch" :loading="nameIptLoading" />
          </a-form-model-item>
          <a-form-model-item label="法人姓名" prop="legalName">
            <a-input v-model="templateForm.legalName" placeholder="请输入法人姓名" :disabled="true" />
          </a-form-model-item>
          <a-form-model-item label="社会统一信用码" prop="creditCode">
            <a-input v-model="templateForm.creditCode" placeholder="请输入社会统一信用码" :disabled="true" />
          </a-form-model-item>
          <a-form-model-item label="联系地址" prop="address">
            <a-input v-model="templateForm.address" placeholder="请输入联系地址" :disabled="true" />
          </a-form-model-item>
          <a-form-model-item label="手机号码" prop="mobile">
            <a-input v-model="templateForm.mobile" placeholder="请输入手机号码" :disabled="true" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <!-- 详情弹窗 -->
      <a-modal v-model="isContractDetail" title="签约主体详情" :width="360" footer :body-style="{ 'padding-top': '10px' }" @cancel="handleCancel(1)">
        <a-descriptions title=" " :column="1">
          <a-descriptions-item label="主体名称">{{ detailModalObj.name }}</a-descriptions-item>
          <a-descriptions-item label="法人名称">{{ detailModalObj.legalPerson }}</a-descriptions-item>
          <a-descriptions-item label="社会统一信用码">{{ detailModalObj.taxpayerNumber }}</a-descriptions-item>
          <a-descriptions-item label="联系地址">{{ detailModalObj.address }}</a-descriptions-item>
          <a-descriptions-item label="手机号码">{{ detailModalObj.phone }}</a-descriptions-item>
          <a-descriptions-item label="创建人">{{ detailModalObj.createBy }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ detailModalObj.createTime | dateFilter }}</a-descriptions-item>
          <a-descriptions-item label="更新时间">{{ detailModalObj.updateTime | dateFilter }}</a-descriptions-item>
        </a-descriptions>
      </a-modal>
    </div>
  </page-layout>
</template>

<script>
import { transferDate } from '@/utils/util';
import { get_OSS_config } from '@/services/api';
import PageLayout from '@/layouts/PageLayout';
import { qyPageListApi, createListApi, updateListApi, getTycInfoByNameApi } from '@/services/signSubject';
export default {
  name: 'contractManagement',
  components: { PageLayout },
  data () {
    return {
      total: 0,
      get_OSS_config: get_OSS_config,
      get: 'get',
      columns: [
        {
          title: '主体名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          width: 300,
          ellipsis: true,
          fixed: 'left',
        },
        {
          title: '法人姓名',
          dataIndex: 'legalPerson',
          scopedSlots: { customRender: 'legalPerson' },
          width: 'auto',
        },
        {
          title: '统一社会信用码',
          dataIndex: 'taxpayerNumber',
          scopedSlots: { customRender: 'taxpayerNumber' },
          width: 'auto',
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          scopedSlots: { customRender: 'createBy' },
          width: 'auto',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
          width: 'auto',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          scopedSlots: { customRender: 'updateTime' },
          width: 'auto',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          width: 'auto',
          fixed: 'right',
        },
      ],
      dataSource: [],
      size: 2,
      isNewTemplate: false,
      isContractDetail: false,
      nowTemplate: [],
      nowTemplateId: null,
      templateForm: {
        subjectName: '',
        legalName: '',
        creditCode: '',
        address: '',
        mobile: '',
      },
      templateFormRules: {
        subjectName: [
          {
            required: true,
            message: '主体名称不允许为空！',
            trigger: 'blur',
          },
        ],
        legalName: [
          {
            required: true,
            message: '法人名字不允许为空！',
            trigger: 'blur',
          },
        ],
      },
      searchTemplateState: {
        name: '',
        page: 1,
        size: 10,
      },
      nowTemplateType: 0,
      projectList: [],
      detailModalObj: {},
      confirmLoading: false,
      modalTitle: '新建',
      loading: false,
      nameIptLoading: false,
    };
  },
  filters: {
    dateFilter (str) {
      if (str) {
        return transferDate(str, 0);
      } else {
        return str ? str : '-';
      }
    },
  },
  computed: {
    templateDetailCreateTime () {
      return this.nowTemplate.createTime ? transferDate(this.nowTemplate.createTime, 2) : '';
    },
    templateDetailUpdateTime () {
      return this.nowTemplate.updateTime ? transferDate(this.nowTemplate.updateTime, 2) : '';
    },
  },
  methods: {
    iptOnSearch () {
      if (this.templateForm.subjectName) {
        this.nameIptLoading = true
        getTycInfoByNameApi({ name: this.templateForm.subjectName }).then(res => {
          this.nameIptLoading = false
          let { code, data, msg } = res.data
          if (code === 200) {
            let { address, legalPerson, phone, taxpayerNumber, name } = data

            this.templateForm = {
              subjectName: name,
              legalName: legalPerson,
              creditCode: taxpayerNumber,
              address: address,
              mobile: phone
            }
          } else {
            this.$message.error(msg)
            this.templateForm = {}
          }
        })
      } else {
        this.$message.error('请输入主体名称！')
      }

    },

    onSearch () {
      this.getList();
    },

    onNewTemplate () {
      this.nowTemplateType = 0;
      this.isNewTemplate = true;
      this.modalTitle = '新建';
      this.templateForm = {};
    },
    onEdit (data) {
      this.nowTemplateType = 1;
      this.isNewTemplate = true;
      this.modalTitle = '编辑';
      this.$Storage.set('qySubjectId', data.id)

      let { address, legalPerson, name, phone, taxpayerNumber } = data;

      this.templateForm = {
        subjectName: name,
        legalName: legalPerson,
        creditCode: taxpayerNumber,
        address: address,
        mobile: phone
      }
    },

    onDetail (data) {
      this.detailModalObj = { ...data };
      this.isContractDetail = true;
    },
    onSelectChange (value) {
      this.templateForm.projectBaseId = value.split(' ')[0];
      this.templateForm.projectBaseName = value.split(' ')[1];
    },

    onConfirmDelete (id) {
      this.dataSource = this.dataSource.filter(val => val.id != id);
    },
    handleOk () {
      if (!this.templateForm.subjectName) {
        this.$message.error('请输入主体名称！')
        return
      }

      if (!this.templateForm.creditCode) {
        this.$message.error('请先查询后再保存！')
        return
      }

      let { subjectName, legalName, creditCode, address, mobile } = this.templateForm;

      let params = {
        id: this.modalTitle == '新建' ? null : this.$Storage.get('qySubjectId'),
        name: subjectName, // 主体名称
        legalPerson: legalName, // 法人姓名
        taxpayerNumber: creditCode, // 统一社会信用码
        address: address, // 联系地址
        phone: mobile, // 联系电话
      };

      let $api = this.modalTitle == '新建' ? createListApi : updateListApi;

      this.confirmLoading = true;
      $api(params).then(res => {
        let { code, msg } = res.data;

        this.confirmLoading = false;
        this.isNewTemplate = false;
        if (code === 200) {
          this.$message.success(msg);
          this.getList();
        } else {
          this.$message.error(msg);
        }
      });
    },
    handleCancel (i) {
      if (i == 0) {
        this.$refs.addTemplate.resetFields();
        this.isNewTemplate = false;
      } else {
        this.isContractDetail = false;
      }
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.searchTemplateState.page = page;
      this.searchTemplateState.size = pageSize;
      this.getList();
    },
    onSizeChange (current, size) {
      this.searchTemplateState.page = 1;
      this.searchTemplateState.size = size;
      this.getList();
    },

    getList () {
      let params = {
        page: this.searchTemplateState.page,
        size: this.searchTemplateState.size,
        searchParam: this.searchTemplateState.name,
      };

      this.loading = true;
      qyPageListApi(params).then(res => {
        this.loading = false;
        let { code, data, msg } = res.data;

        if (code === 200) {
          this.dataSource = data.content;
          this.searchTemplateState.page = data.pageNum;
          this.total = data.totalElements;
          this.searchTemplateState.size = data.pageSize;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
  mounted () {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.contract-management {
  background: #fff;
  padding: 20px 24px;
  .contract-table {
    margin-top: 20px;
  }
}
.require {
  /deep/.ant-col.ant-col-6.ant-form-item-label {
    &:before {
      display: inline-block;
      margin-right: 4px;
      color: #f5222d;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: "*";
    }
  }
}
</style>
